<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
  <TITLE> ZTREE DEMO </TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="demoStyle/demo.css" type="text/css">
  <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="jquery-1.4.2.js"></script>
  <script type="text/javascript" src="jquery-ztree-2.5.js"></script>
  <script type="text/javascript" src="asyncData/demoData.js"></script>
  <script type="text/javascript" src="demoTools.js"></script>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
	var zTree1, zTree2;
	var setting;

		setting = {
			editable: true,
			edit_renameBtn:false,
			edit_removeBtn:false,
			callback: {
				click:	zTreeOnClick,
				drop: zTreeOnDrop
			}
		};

	$(document).ready(function(){
		reloadTree();
	});

	var preSelectedNode1;
	var preSelectedNode2;

	function zTreeOnClick(event, treeId, treeNode) {
		if (treeId=="treeDemo") {
			if (preSelectedNode1 == treeNode) {
				zTree1.cancelSelectedNode();
				preSelectedNode1 = null;
			} else {
				preSelectedNode1 = treeNode;
			}
		} else {			
			if (preSelectedNode2 == treeNode) {
				zTree2.cancelSelectedNode();
				preSelectedNode2 = null;
			} else {
				preSelectedNode2 = treeNode;
			}
		}
	}

	function zTreeOnDrop(event, treeId, treeNode, targetNode, moveType) {
		preSelectedNode1 = zTree1.getSelectedNode();
		preSelectedNode2 = zTree2.getSelectedNode();
	}

	function moveTreeL2R() {
		moveTreeNode(zTree1, zTree2);
	}
	
	function moveTreeR2L() {
		moveTreeNode(zTree2, zTree1);
	}
	
	function moveTreeNode(srcTree, targetTree) {
		var srcNode = srcTree.getSelectedNode();
		if (!srcNode) {
			alert("请先选择需要移动的节点！");
			return;
		}
		var targetNode = targetTree.getSelectedNode();
		srcTree.removeNode(srcNode);		
		targetTree.addNodes(targetNode, [srcNode]);
		targetTree.selectNode(srcNode);		
	}

	function reloadTree() {
		zTree1 = $("#treeDemo").zTree(setting, clone(zNodes, "-t1"));
		zTree2 = $("#treeDemo2").zTree(setting, clone(zNodes, "-t2"));
	}

  //-->
  </SCRIPT>
 </HEAD>

<BODY>
<center class="headTitle">高级应用演示<span> —— 两棵树之间数据交互</span></center>
<TABLE border=0 width="710" class="tb1">
	<TR>
		<TD colspan="3" align=left valign=top>
		<div class="demoContent">
			<li class="title focus">
				<button class="ico books" onfocus="this.blur();"></button>两棵树之间数据交互说明
				<ul class="operate" style="color:red">
					1、从 v2.3 版本开始，可以直接使用鼠标在多棵树之间拖拽节点。
				</ul>
				<ul class="operate">
					2、拖拽规则请参考“编辑演示”的说明。
				</ul>
				<ul class="operate">
					3、重新点击已选中的节点，可以取消被选中状态；目标树没有被选中节点时，则直接转移到根节点。
				</ul>
				<ul class="operate">
					4、转移节点代码请务先执行 srcTree.removeNode(srcNode) 方法，后执行 targetTree.addNodes(targetNode, [srcNode]) 方法。
				</ul>
				<ul class="operate" style="color:red">
					5、需要使用 cancelSelectedNode() 方法的用户，请使用 2010-08-06 以及之后发布的 zTree 代码，之前的版本没有此方法。
				</ul>
				<ul></ul>
			</li>
		</div>
		</TD>
	</TR>
	<TR>
		<TD width=340px align=center valign=top>
		<div class="zTreeDemoBackground">
			<ul id="treeDemo" class="tree"></ul>
		</div>		
		</TD>
		<TD width=30px align="center" valign="middle" class="operate">
			<button class="ico moveNode" onfocus="this.blur();" title="移动节点 右->左" onclick="moveTreeL2R();"></button>
			<br/><br/><br/><br/><br/><br/><br/><br/>
			<button class="ico moveNodeR" onfocus="this.blur();" title="移动节点 左->右" onclick="moveTreeR2L();"></button>
			<br/><br/><br/><br/><br/><br/><br/><br/>
			<button class="ico refresh" onfocus="this.blur();" title="恢复初始状态" onclick="reloadTree();"></button>
			<br/><br/><br/><br/><br/><br/><br/><br/>
		</TD>
		<TD width=340px align=center valign=top>
		<div class="zTreeDemoBackground">
			<ul id="treeDemo2" class="tree"></ul>
		</div>		
		</TD>
	</TR>
</TABLE>
</BODY>
</HTML>
